@charset "UTF-8";
@import "iconpackage";
@import "color";


@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-hz6n1e');
	src:url('fonts/icomoon.eot?#iefix-hz6n1e') format('embedded-opentype'),
		url('fonts/icomoon.woff?-hz6n1e') format('woff'),
		url('fonts/icomoon.ttf?-hz6n1e') format('truetype'),
		url('fonts/icomoon.svg?-hz6n1e#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	cursor: pointer;
	margin-left:0;

	&:active{
		background-color: $black;
		color: $white;
	}

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


$iconMaps:(home:$home,office:$office,newspaper:$newspaper,pencil:$pencil,quill:$quill,droplet:$droplet,image:$image,
	images:$images,camera:$camera,headphones:$headphones,film:$film,pacman:$pacman,connection:$connection,file:$file,
	folder-open:$folder-open,tag:$tag,barcode:$barcode,qrcode:$qrcode,cart:$cart,cart2:$cart2,credit:$credit,
	phone:$phone,address-book:$address-book,envelope:$envelope,location:$location,map:$map,alarm:$alarm,
	calendar:$calendar,keyboard:$keyboard,mobile:$mobile,disk:$disk,bubbles:$bubbles,user:$user,user2:$user2,
	user3:$user3,zoomin:$zoomin,zoomout:$zoomout,lock:$lock,unlocked:$unlocked,cog:$cog,stats:$stats,bars:$bars,
	gift:$gift,cloud:$cloud,thumbs-up:$thumbs-up,happy:$happy,smiley:$smiley,tongue:$tongue,sad:$sad,wink:$wink,grin:$grin,
	cool:$cool,angry:$angry,evil:$evil,shocked:$shocked,confused:$confused,neutral:$neutral,wondering:$wondering,
	checkmark:$checkmark,volume-medium:$volume-medium,arrow-up-left:$arrow-up-left,arrow-up:$arrow-up,
	arrow-up-right:$arrow-up-right,arrow-right:$arrow-right,arrow-down-right:$arrow-down-right,arrow-down:$arrow-down,
	arrow-down-left:$arrow-down-left,arrow-left:$arrow-left,html5:$html5,firefox:$firefox,IE:$IE,opera:$opera,
	out:$out,in:$in,search:$search,googleplus:$googleplus,android:$android,windows8:$windows8);

@each $icon,$value in $iconMaps{
	.icon-#{$icon}:before{
		content: "#{$value}";
	}
}


.tool-bar{
	min-width:10px;
	.tool-group{
		display:inline-block;
		overflow: hidden;
		float:left;
		position:relative;
		margin-left:25px;
		// *margin-left:expression(this.previousSibling==null?"none":"0");
		// *clear:expression(this.nextSibling==null?"false":"left");
		&:first-child{
			margin-left: 0;
		}
		// &:last-child{
		// 	clear:left;
		// }

		[class^="icon-"],[class*=" -icon"]{
			position:relative;
			width:20%;
			left: 0px;
			&:first-child{
				left: 0;
			}
		}
	}
}